﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js" use="form,layer,code,select"></script>
    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <p>
        form.js是jquery扩展，包括以下方法
    </p>


    <h3>1、阻止form表单自动填充-preventAutoInput(time, callback, isStrength)</h3>
    <form action="formjs2.html">
        
        <input type="text" class="rayui-input" placeholder="请输入用户名" />
        <input type="password" class="rayui-input" placeholder="请输入密码" />

        <button type="submit" class="rayui-btn">提交-无name</button>

    </form>
<form action="formjs2.html">
        
    <input type="text" name="uname" class="rayui-input" placeholder="请输入用户名" />
    <input type="password"  name="upsw" class="rayui-input" placeholder="请输入密码" />

    <button type="submit" class="rayui-btn">提交-有name</button>
    
    <pre class="rayui-code">

使用方法：$("#form1").preventAutoInput(time,callback,isStrength);
参数：time：移除时间，单位毫秒，默认500
          callback：回调函数，移除后函数
          isStrength：是否开启增强模式，为true时开启。某些浏览器（如360）搞特殊，常规做法无法实现，需要把参数设置为true，原理额外再监听focus和blur事件
        </pre>

    <div class="card">
        <p>点击提交后，有些浏览器会提示记住密码，请选择记住密码</p>
    </div>
</form>

    <h3>2、回车移动到下一个文本框-registerEnterKey(btn)</h3>
    <form id="form2" action="formjs2.html">

        <input type="text" class="rayui-input" placeholder="请输入文本1" />
        <input type="text" class="rayui-input" placeholder="请输入文本2" />
        <input type="password" class="rayui-input" placeholder="请输入密码" />

        <button type="submit" class="rayui-btn submitbtn">提交</button>

        <script>
            $('#form2').preventAutoInput();
            $("#form2").registerEnterKey(".submitbtn");
        </script>

        <pre class="rayui-code">

使用方法：$("#form2").registerEnterKey(".submitbtn");
参数：btn：提交按钮
        </pre>
    </form>



    <h3>3、form输入框序列化为json格式-serializeJson()</h3>
    <form id="form3">

        <input type="text" name="key1" class="rayui-input" placeholder="请输入文本1" />
        <input type="text" name="key2" class="rayui-input" placeholder="请输入文本2" />
        <input type="password" name="psw" class="rayui-input" placeholder="请输入密码" />

        <button type="submit" class="rayui-btn">获取json参数</button>

        <script>
            $('#form3').preventAutoInput();
            rayui.ready(function () {

                $('#form3').submit(function (e) {
                    var data = $('#form3').serializeJson();
                    rayui.layer.alert(JSON.stringify(data));
                    e.preventDefault();
                });
            });
        </script>

        <pre class="rayui-code">

使用方法：var data = $('#form3').serializeJson();
        </pre>
    </form>
    
    <h3>4、获取选择器值或属性值数组-getArray(attr)和join(c,attr)</h3>
    <form id="form4">

        <input type="text" name="input1" class="rayui-input" placeholder="请输入文本1" />
        <input type="text" name="input2" class="rayui-input" placeholder="请输入文本2" />
        <input type="password" name="password" class="rayui-input" placeholder="请输入密码" />
        <br />
        <label>label</label>
        <br />
        <select name="select" class="rayui-select">
            <option value="select1">select1</option>
            <option value="select2">select2</option>
        </select>
        <br />
        <textarea class="rayui-textarea">textarea</textarea>
        <br />

        <a id="form4_btn1" class="rayui-btn">获取选择器值</a>
        <a id="form4_btn2" class="rayui-btn btn-primary">获取选择器属性name值</a>
        <a id="form4_btn3" class="rayui-btn btn-success">扩展方法join</a>

        <script>
            $('#form4').preventAutoInput();
            rayui.ready(function () {
                rayui.select.render();

                $("#form4_btn1").click(function () {
                    var list = $('#form4').find("input,textarea,label,select").getArray();
                    rayui.layer.alert(list.join(','));
                });

                $("#form4_btn2").click(function () {
                    var list = $('#form4').find("input,textarea,label,select").getArray("name");
                    rayui.layer.alert(list.join(','));
                });

                $("#form4_btn3").click(function () {
                    var data = $('#form4').find("input,textarea,label,select").join(',', "name");
                    rayui.layer.alert(data);
                });
            });

        </script>

        <pre class="rayui-code">

使用方法：var data = $('#form4').find("input,textarea,label,select").getArray(attr);
attr为空时读取dom的value值或text值，不为空时获取含有attr属性的dom对象的attr值

扩展方法：join=function(c,attr)；在getArray方法的基础上实现拼接，eg：
                var data = $('#form4').find("input,textarea,label,select").join(attr);
        </pre>
    </form>




    <script>
        rayui.ready(function () {
            rayui.code.render();
        });
        
    </script>
</body>
</html>